<script setup>
import { getGoodsAPI } from "@/apis/home";
import { onMounted, ref } from "vue";
import HomePanel from "@/views/Home/components/HomePanel.vue";
import GoodsItem from "./GoodsItem.vue";
const goodsList = ref([]);
const getGoodsList = async () => {
  const res = await getGoodsAPI();
  goodsList.value = res.result;
};
onMounted(() => getGoodsList());
const handleGoodsList = () => {
  if (!goodsList.value) return [];
  else return goodsList.value;
};
</script>

<template>
  <HomePanel
    v-for="item in handleGoodsList()"
    :key="item.id"
    :title="item.name"
  >
    <div
      class="mainProduct"
      style="
        width: 74%;
        height: 600px;
        display: flex;
        background-color: #e9f6ee;
      "
    >
      <div class="leftImg" style="width: 20%; height: 100%">
        <img style="height: 100%; width: 100%" :src="item.picture" alt="" />
        <div
          style="
            position: relative;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            height: 80px;
            top: -50%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
          "
        >
          {{ item.saleInfo }}
        </div>
      </div>
      <div
        class="rightImg"
        style="height: 100%; width: 80%; display: flex; flex-wrap: wrap"
      >
        <div
          class="productItem"
          v-for="goods in item.goods"
          :key="goods.id"
          style="width: 25%; height: 50%; padding: 20px 30px 10px 30px"
        >
          <GoodsItem :goods="goods"></GoodsItem>
        </div>
      </div>
    </div>
  </HomePanel>
</template>


<style scoped>

</style>